import { useState } from "react"

// FormDemo.jsx
export default () => {
  const [name, setName] = useState('')
  const [sex, setSex] = useState(2)

  const [value, setValue] = useState('lime')
  const [hobby, setHobby] = useState(['AAA', 'BBB'])

  const handleChangeName = (e) => {
    const { value } = e.target
    setName(value)
  }
  const handleChangeValue = (e) => {
    const { value } = e.target
    setValue(value)
  }
  const changeSex = (e) => {
    const { value } = e.target
    setSex(value)
  }

  const changeHobby = (e) => {
    // 通过事件对象，获取选择的状态和值
    const { checked, value } = e.target
    console.log(e.target.value);
    let arr = hobby.concat([]);
    if (checked) {
      //添加一个值
      arr.push(value)
      setHobby(arr)

    } else {
      // 删除一个值
      let newArr = arr.filter(el => {
        return el !== value
      })

      setHobby(newArr)
    }
  }
  return (
    <div>
      <div>
        username: {name}
        水果： {value}
        性别: {sex}
        hobby: {hobby}
      </div>
      <form>
        <input type="text" value={name} onChange={handleChangeName} />
        <br />
        <select value={value} onChange={handleChangeValue}>
          <option value="grapefruit">葡萄柚</option>
          <option value="lime">酸橙</option>
        </select>
        {/* {// 多选 <select multiple={true} value={['B', 'C']}> } */}
        <br />

        <label>
          <input type="radio" value="1" checked={sex == 1} onChange={changeSex} />男
        </label>
        <label>
          <input type="radio" value="2" checked={sex == 2} onChange={changeSex} />女
        </label>
        <br />

        <label>
          <input type="checkbox" value='AAA' onChange={changeHobby} checked={hobby.includes('AAA')} />AAA
        </label>
        <label>
          <input type="checkbox" value='BBB' onChange={changeHobby} checked={hobby.includes('BBB')} />BBB
        </label>
      </form>
    </div>
  )
}

// const FormDemo =  () => {
//   return (
//     <div></div>
//   )
// }

// export default FormDemo